import React from "react";
// import Demo from "./Demo";
import { NavLink, useRoutes } from "react-router-dom";
import router from "./router";
import Nav from "./components/Nav/Nav";
import "./App.css";

// 类式组件路由写法
// export default class App extends React.Component {
// 	render() {
// 		return (
// 			<>
// 				{/* <Home/>
// 				<Ref></Ref>
// 				<Hooks></Hooks>
// 				<Todolist></Todolist>
// 				<Heros></Heros>
// 				<Duanzi></Duanzi> */}
// 				<NavLink to="/home">首页</NavLink>
// 				<NavLink to="/ref">ref</NavLink>
// 				<NavLink to="/hooks">hooks</NavLink>
// 				<NavLink to="/todolist">todolist</NavLink>
// 				<NavLink to="/heros">英雄</NavLink>
// 				<NavLink to="/duanzi">段子</NavLink>
// 				<NavLink to="/news">新闻</NavLink>

// 				<Routes>
// 					<Route path="/home" element={<Home />}></Route>
// 					<Route path="/ref" element={<Ref />}></Route>
// 					<Route path="/hooks" element={<Hooks />}></Route>
// 					<Route path="/todolist" element={<Todolist />}></Route>
// 					<Route path="/heros" element={<Heros />}></Route>
// 					<Route path="/duanzi" element={<Duanzi />}></Route>

// 					<Route path="/news" element={<News />}>
// 						{/* //配置子路由 */}
// 						<Route path="/news/guonei" element={<Guonei />}></Route>
// 						<Route path="/news/junshi" element={<Junshi />}></Route>
// 						<Route index element={<Navigate to="/news/guonei" />}></Route>
// 					</Route>

// 					{/* 代表所有路由地址,必须写在最后 */}
// 					<Route path="*" element={<NotFound />}></Route>
// 				</Routes>

// 				{/* <A></A> */}
// 			</>
// 		);
// 	}
// }

// 函数组件路由写法
export default function App() {
	//配置路由对象
	let routes = useRoutes(router);
	return (
		<>
			<Nav />
			{routes}
		</>
	);
}
